<template>
	<view style="background-color: #F7F7F6; padding-bottom: 150rpx;">
		<!-- 搜索部分 -->
		<view class="container">
			<!-- 小程序头部兼容 -->
			<uni-search-bar @confirm="search" :focus="true" v-model="searchValue" @blur="blur" @focus="focus"
				@input="input" @cancel="cancel" @clear="clear" class="search" cancelButton="none">
			</uni-search-bar>
			<view class="area">
				重庆
				<uni-icons type="bottom" size="15"></uni-icons>
			</view> 
		</view>

		<!-- banner图 -->
		<view class="banner">

		</view>

		<!-- menu菜单 -->
		<view class="menu">
			<swiper :indicator-dots="true" class="swiper" indicator-active-color="#F43F5E" indicator-color="#D8D8D8">
				<swiper-item>
					<u-grid :border="false" col="5">
						<u-grid-item :customStyle="{width:150+'rpx',height:150+'rpx'}"
							v-for="(item, index) in menuIcons" :index="index" :key="item.id">
							<view :style="{backgroundImage:`url(${item.icon})`}" class="menuImg"></view>
							<text class="grid-text">{{ item.text}}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item>
					<u-grid :border="false" col="5">
						<u-grid-item :customStyle="{width:150+'rpx',height:150+'rpx'}"
							v-for="(item, index) in menuIcons" :index="index" :key="item.id">
							<view :style="{backgroundImage:`url(${item.icon})`}" class="menuImg"></view>
							<text class="grid-text">{{ item.text}}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
				<swiper-item>
					<u-grid :border="false" col="5">
						<u-grid-item :customStyle="{width:150+'rpx',height:150+'rpx'}"
							v-for="(item, index) in menuIcons" :index="index" :key="item.id">
							<view :style="{backgroundImage:`url(${item.icon})`}" class="menuImg"></view>
							<text class="grid-text">{{ item.text}}</text>
						</u-grid-item>
					</u-grid>
				</swiper-item>
			</swiper>
		</view>

		<!-- 超值优惠 -->
		<view class="preferential">
			<!-- 优惠标题 -->
			<u-section title="超值优惠" sub-title="查看更多" :show-line="false" class="section" font-size="32"></u-section>

			<!-- 优惠内容 -->
			<view class="pre_content">
				<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
					<view id="demo" class="scroll-view-item_H uni-bg-red" v-for="item in preferentialData"
						:key="item.id">
						<view class="pre_img">
						</view>
						<view class="title">
							<span class="tuan">团</span>
							<span class="text">仅售{{item.price}}元！{{item.title}}</span>
						</view>
						<view class="price">
							<span class="now_price"><span class="icon">￥</span>{{item.price.toFixed(2)}}</span>
							<span class="old_price"
								style="text-decoration-line: line-through;">店面价：{{item.storePrice}}元</span>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchValue:"",
				menuIcons: [{
						id: 0,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 1,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},

					{
						id: 2,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 3,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 4,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					}, {
						id: 5,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 6,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 7,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 8,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},

					{
						id: 9,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 10,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 11,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 12,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 13,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					},
					{
						id: 14,
						icon: '/static/menu/menuImage.png',
						text: '洗浴汗蒸'
					}
				],
				swiperList: ['integral', 'kefu-ermai', 'coupon', 'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list',
					'gift', 'scan', 'pause-circle', 'wifi', 'email', 'list'
				],
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				preferentialData: [{
						id: 0,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: '价值312的4人自…',
						price: 226,
						storePrice: 400
					},
					{
						id: 1,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: "价值312的4人自…",
						price: 199,
						storePrice: 400
					}, {
						id: 2,
						imageUrl: 'https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png',
						title: '价值312的4人自…',
						price: 99,
						storePrice: 400
					}
				]
			};
		},
		methods: {
			search(res) {
				uni.showToast({
					title: '搜索：' + res.value,
					icon: 'none'
				})
			},
			input(res) {
				console.log('----input:', res)
			},
			clear(res) {
				// uni.showToast({
				// 	title: 'clear事件，清除值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			blur(res) {
				// uni.showToast({
				// 	title: 'blur事件，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},
			focus(e) {
				// uni.showToast({
				// 	title: 'focus事件，输出值为：' + e.value,
				// 	icon: 'none'
				// })
			},
			cancel(res) {
				// uni.showToast({
				// 	title: '点击取消，输入值为：' + res.value,
				// 	icon: 'none'
				// })
			},


			//超级优惠 --滑块
			upper: function(e) {
				console.log(e)
			},
			lower: function(e) {
				console.log(e)
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop: function(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			}
		}
	}
</script>

<style lang="scss">
	// 搜索
	.container {
		width: 100%;
		position: fixed;
		top: 0;
		display: flex;
		padding: 10px 0;
		background: #fff;
		gap: 80rpx;

		.search {
			flex: 1;
		}

		.uni-searchbar {
			width: 100% !important;
		}

		.area {
			padding-right: 20px;
			// width: 33px;
			height: 22px;
			font-size: 15px;
			font-family: Humnst777 BT-Roman, Humnst777 BT;
			font-weight: 600;
			color: #242424;
			line-height: 33px;

			.uni-icons {
				padding-left: 5px;
				color: 000;
			}
		}

		/deep/ .uni-searchbar {
			width: 70%;
			height: 30px;
			padding: 0 10px;

			.uni-searchbar__box {
				height: 30px;
				justify-content: left;
			}
		}
	}

	// banner
	.banner {
		width: 100%;
		height: 280rpx;
		background-image: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/8714a93ee5594d028b3a8be91afcd421_mergeImage.png);
		margin-top: 100rpx;
	}

	// 菜单
	.swiper {
		height: 460rpx;
		margin-top: 20rpx;
		background-color: #F7F7F6;
		.grid-text {
			font-size: 24rpx;
			color: #909399;
			padding: 20rpx 0 10rpx 0rpx;
			/* #ifndef APP-PLUS */
			box-sizing: border-box;
			/* #endif */
		}
		.menuImg {
			width: 68rpx;
			height: 56rpx;
			background-size: cover;
		}

		::v-deep .u-grid-item-box {
			padding: 10rpx 0 !important;
		}
		.u-grid-item {
			background-color: #F7F7F6 !important;
		}

	}

	// 优惠
	.preferential {
		padding: 0 20rpx;
		box-sizing: border-box;

		.section {}

		.swiper {
			margin-top: 40rpx;
		}
	}

	.pre_content {
		margin-top: 40rpx;
	}

	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		display: subgrid;
		white-space: nowrap;
		width: 100%;
	}

	.scroll-view-item {
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
		font-size: 36rpx;
	}

	.scroll-view-item_H {
		display: inline-block;
		width: 528rpx;
		border-radius: 20rpx;
		margin-right: 26rpx;
		background-color: #fff;
		.title {
			margin-top: 12rpx;
			padding: 0 34rpx 0 15rpx;
			font-weight: 600;
			line-height: 40rpx;

			.tuan {
				font-size: 24rpx;
				color: #FF8439;
				font-weight: normal;
				padding: 5rpx;
				margin-right: 8rpx;
				border-radius: 50%;
				background-color: #FF8439 80%;
			}
		}

		.price {
			padding: 4rpx 34rpx 20rpx 15rpx;

			.now_price {
				font-size: 34rpx;
				color: #FF1A1A;
				font-weight: 600;
				padding-right: 22rpx;

				.icon {
					font-size: 26rpx;
				}
			}

			.old_price {
				font-size: 22rpx;
				color: #929292;
			}
		}
	}

	.scroll-view-item_H:last-child {
		margin: 0;
	}

	.pre_img {
		width: 526rpx;
		height: 252rpx;
		background: url('https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/4e08c295015249f89261c48d71c7ce93_mergeImage.png') no-repeat;
	}
</style>